const app = getApp()
import request from "../../utils/request";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    cartCount:0,
    titleImageList:[
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-1.png',id:1,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-2.png',id:2,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-3.png',id:3,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-4.png',id:4,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-5.png',id:5,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/textStyle/1-6.png',id:6,animation:null}
    ],
    footerBoxList:[
      {title:'引流',text:'丰富营销活动,多种引流玩法',animation:null},
      {title:'转化',text:'秒杀、限时促销、组合套餐、N元M件、定金预售、新客有礼、短视频导购、直播等,引导商城消费',animation:null},
      {title:'留存',text:'会员等级、会员卡、会员储值、会员积分、积分商城，构建完整会员体系，提高用户留存',animation:null},
      {title:'复购',text:'礼品卡、支付有礼、积分商城、秒杀、限时促销、组合套餐、N元M件等营销活动,刺激用户复购',animation:null},
      {title:'裂变',text:'拼团、砍价、推广员等社交玩法,引导会员转介绍',animation:null},
      {title:'经营分析',text:'拼团、砍价、推广员等社交玩法,引导会员转介绍',animation:null}
    ],
    gongyuList:[
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/2-1.png',id:1,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/2-2.png',id:2,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/2-3.png',id:3,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/2-4.png',id:4,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/2-2.png',id:5,animation:null}
    ],
    yongjinList:[
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-1.png',id:1,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-2.png',id:2,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-3.png',id:3,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-4.png',id:4,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-5.png',id:5,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-6.png',id:6,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-7.png',id:7,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-8.png',id:8,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/3-9.png',id:9,animation:null}
    ],
    starList:[
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/star.png',id:1,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/star-1.png',id:1,animation:null}
    ],
    chengjiaoList:[
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-1.png',id:1,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-2.png',id:2,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-3.png',id:3,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-4.png',id:4,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-5.png',id:5,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-6.png',id:6,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-7.png',id:7,animation:null},
      {src:'https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/jump-image/4-8.png',id:8,animation:null},
    ],
    imageList: [
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/all.png", title: "全行业",id:1},
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/food.png", title: "餐饮类",id:2},
      {
        src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/hotel.png",
        title: "酒店/民宿类",id:3
      },
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/official.png", title: "官网类",id:4},
    ],
    images: [
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/1-2.png", id: 1 },
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/1-3.png", id: 2 },
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/1-4.png", id: 3 },
    ],
    mainimage:[
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/2-1.png", id: 4 },
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/2-2.png", id: 5 },
    ],
    footerimage:[
      { src: "https://jiazhiqin.oss-cn-chengdu.aliyuncs.com/mini-program/category-image/3-1.png", id: 6 }
    ],
    zhongXinHuaAnimation: null,
    cxiaoChengXuAnimation:null,
    siYouHuaAnimation:null,
    sheJiaoHuaAnimation:null,
    secendBoxAnimation:null,
    animations: [],
    allList:[],
    foodList:[],
    hotelList:[],
    officialList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getcartcount()
    setTimeout(() => {
      this.zhongxinhua()
    }, 1500);
    setTimeout(() => {
      this.siyouhua()
    }, 2000);
    setTimeout(() => {
      this.shejiaohua()
    }, 2500);
    setTimeout(() => {
      this.secendboxtitle()
    }, 3000);
    setTimeout(() => {
      this.initAnimationsThird()
    }, 4000);
    setTimeout(() => {
      this.xiaochnegxu()
    }, 1000);
    this.initAnimations(this.data.titleImageList);
    setTimeout(() => {
      this.initAnimationsYu(this.data.gongyuList)
    }, 3000);
    setTimeout(() => {
      this.initAnimationsYong(this.data.yongjinList)
    }, 5000);
    setTimeout(() => {
      this.initAnimationsStar(this.data.starList)
    }, 4000);
    setTimeout(() => {
      this.initAnimationsChengJiao(this.data.chengjiaoList)
    }, 7000);
  },
  updateCartBadge() {
    const app = getApp();
    const newCount = app.globalData.cartCount;
    wx.setStorageSync('cartCount', newCount); // 存储到本地存储，以便跨页面访问
    this.setData({ cartCount: newCount }); // 假设你已经在页面的data中定义了cartCount
  },
// 按钮的点击事件，点击跳转页面
  jumpPage(e){
    let num = e.currentTarget.dataset.param
    if(num === 1){
      wx.navigateTo({
        url: `../all/all?pakege=${this.data.allList}`,
      })
    }else if(num ===2){
      wx.navigateTo({
        url: `../food/food?pakege=${this.data.foodList}`,
      })
    }else if(num ===3){
      wx.navigateTo({
        url: `../hotel/hotel?pakege=${this.data.hotelList}`,
      })
    }else if(num ===4){
      wx.navigateTo({
        url: `../Official/Official?pakege=${this.data.officialList}`,
      })
    }
  },

  initAnimations() {
    const duration = 1000;  //持续时长
    const delayBetweenAnimations = 200 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.titleImageList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateY('-40rpx') // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
        .translateY(0) // 回到原位
        .opacity(1) // 结束时透明度为1
        .step()
        .translateY('40rpx') // 回到原位
        .step()
        .translateY(0) // 结束后回到原位
        .step();
      this.setData({
        [`titleImageList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },
  initAnimationsYu() {
    const duration = 1000;  //持续时长
    const delayBetweenAnimations = 200 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.gongyuList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateX('20rpx') // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
      this.setData({
        [`gongyuList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },
  initAnimationsYong() {
    const duration = 1000;  //持续时长
    const delayBetweenAnimations = 200 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.yongjinList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateX('-580rpx') // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
      this.setData({
        [`yongjinList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },
  initAnimationsStar() {
    const duration = 100;  //持续时长
    const delayBetweenAnimations = 200 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.starList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease-in-out',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateX(98) // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
      this.setData({
        [`starList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },
  initAnimationsThird(){
    const duration = 100;  //持续时长
    const delayBetweenAnimations = 500 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.footerBoxList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease-in-out',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateY(0) // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
      this.setData({
        [`footerBoxList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },
  xiaochnegxu(){
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    animation.translateX('0rpx').opacity(1).step();
    this.setData({ cxiaoChengXuAnimation: animation.export() });
  },
  zhongxinhua(){
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    animation.translateX('240rpx').opacity(1).step();
    this.setData({ zhongXinHuaAnimation: animation.export() });
  },
  siyouhua(){
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    animation.translateX('-240rpx').opacity(1).step();
    this.setData({ siYouHuaAnimation: animation.export() });
  },
  shejiaohua(){
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    animation.translateX('270rpx').opacity(1).step();
    this.setData({ sheJiaoHuaAnimation: animation.export() });
  },
  secendboxtitle(){
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
    animation.translateX('0rpx').opacity(1).step();
    this.setData({ secendBoxAnimation: animation.export() });
  },

  
  initAnimationsChengJiao() {
    const duration = 1000;  //持续时长
    const delayBetweenAnimations = 200 //每张图片动画的延迟，这里的延迟主要是在下面使用
    this.data.chengjiaoList.forEach((image, index) => {
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'ease-in-out',
      });
      // 为每张图片创建一个动画，注意这里设置的是动画间隔，不是步骤间隔
      animation
      // 如果要设置为只向上的话就只需要前面的一开始就向上，然后再回到原为即可
        .translateX(98) // 开始时向下移动
        .opacity(1) // 开始时透明度为0
        .step({ delay: index * delayBetweenAnimations}) // 设置延迟
      this.setData({
        [`chengjiaoList[${index}].animation`]: animation.export() // 导出动画
      });
    });
  },

  onAnimationEnd(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.titleImageList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  onAnimationGongYuEnd(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.gongyuList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  onAnimationYongJinEnd(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.yongjinList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  onAnimationChengJiaoEnd(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.chengjiaoList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  onAnimationThird(e) {
    // 当前动画结束，检查是否是最后一个动画
    const currentIndex = e.currentTarget.dataset.index;
    if (currentIndex === this.data.footerBoxList.length - 1) {
      // 如果是最后一个动画，则不需要做任何事，让它结束
      return;
    }
    // 如果不是最后一个动画，手动触发下一个动画
    this.triggerNextAnimation(currentIndex);
  },
  triggerNextAnimation(currentIndex) {
    // 看看现在的下标 + 1 是不是小于数组的长度的如果是的话那就不是最后一个
    if (currentIndex + 1 < this.data.titleImageList.length) {
      const nextAnimation = this.data.titleImageList[currentIndex + 1].animation;
      if (nextAnimation) {
        this.setData({
          [`titleImageList[${currentIndex + 1}].animation`]: nextAnimation
        });
      }
    }
  },
  getcartcount(){
    const cart = wx.getStorageSync('cartCount')
    this.setData({
      cartCount:cart
    })
  },
  getOrderList() {
    const count = wx.getStorageSync("count");
    this.setData({
      cartCount: count,
    });
  },
  goCustomization(){
    wx.navigateTo({
      url: '/pages/customization/customization',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.updateCartBadge()
    this.getcartcount()
    this.getOrderList()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    // 当页面隐藏时，重置动画的opacity为0
    this.resetAnimationsOpacity(0);
  },
  resetAnimationsOpacity(opacity) {
    // 重置所有动画的透明度
    const animations = this.data.images.map(() => this.createBaseAnimation(opacity));
    const animationsHeaders = this.data.mainimage.map(() => this.createBaseAnimation(opacity));
    const animationsFooters = this.data.footerimage.map(() => this.createBaseAnimation(opacity));

    // 更新页面数据
    this.setData({
      animations,
      animationsHeaders,
      animationsFooters,
    });
  },

  /**
   * 创建基础动画实例，只包含透明度变化
   */
  createBaseAnimation(opacity) {
    const animation = wx.createAnimation({
      duration: 0, // 瞬间完成
      timingFunction: 'ease',
    });
    animation.opacity(opacity).step();
    return animation.export();
  },
  triggerNextAnimation(currentIndex) {
    // 看看现在的下标 + 1 是不是小于数组的长度的如果是的话那就不是最后一个
    if (currentIndex + 1 < this.data.images.length) {
      const nextAnimation = this.data.images[currentIndex + 1].animation;
      if (nextAnimation) {
        this.setData({
          [`images[${currentIndex + 1}].animation`]: nextAnimation
        });
      }
    }
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    return {
      title: "嘉之勤官网小程序",
      path: "/pages/index/index",
      imageUrl:
        "https://youyougo2.oss-cn-chengdu.aliyuncs.com/0201506f6fc0f4145e34159c2e2ac66b94b96450dd29e5a19d177edc5dad8023.png",
    };
  },
});
